<%@page import="java.util.Date"%>
<%
/*
	This is meant to be embedded
*/	
%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<jsp:useBean id="skrumListingBean" type="com.skrumtious.action.bean.SkrumListingBean" scope="session" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript" src="js/sprintf-0.7-beta1.js"></script>
<script>
	var promptStr = "Enter in a task.";
	var urlStr = "/skrumtious?action=com.skrumtious.action.";
	
	/**
		Debug - prints the objects values
	*/
	function printz(obj) {
		var str = '';
		if ( obj != null ) {
			for(var i in obj) {
				str += i + ' ' + obj[i];
			}
		}
		return str;
	}
	
	/**
		Notifies the server that a reorder
		occured.
	*/
	function notifyServerOfReorder(tabId) {
		var params = encodeURI( compileCurrentOrder() ) + "&tabId=" + tabId;
		$.ajax({
			url: urlStr + "ReorderSkrumItemWebAction&order=" + params  
			,dataType: "html"
			,type: "GET"
			
			,cache: false
			,context: document.body
			,success: function(data, textStatus, jqXHR) {		
				$( "li" ).each( function(index) {			
					$(this).attr("id", index);			
				});
			}
			,error: function(jqXHR, textStatus, errorThrown) {
				alert('Unable to persist the reorder! Due to: ' + errorThrown);
			}
		});
	}
	
	/**
		Compiles a string representing the
		new order 
	*/
	
	function compileCurrentOrder() {
		var orderStr = '';		
		$( "li" ).each( function(index) {			
			orderStr += ',' + $(this).attr("id");			
		});
		
		/* Remove the first , */
		if (orderStr != '' && orderStr.substring(0, 1) == ',') { 
			orderStr = orderStr.substring(1);
		}
		
		return orderStr;
	}
	
	/**
		Sets up the Sortable
	*/
	$(function() {
		$( "#sortable" ).sortable({
			revert: true
			, helper: 'clone'			
			, stop: function(event, ui) {
				notifyServerOfReorder( ${skrumListingBean.currentTabId} );				
			}
		});
		$( "#draggable" ).draggable({
			connectToSortable: "#sortable",
			helper: "clone",
			revert: "invalid"
		});
		$( "ul, li" ).disableSelection();
		
		resetPrompt();
	});
	
	/**
		Removes the prompt text once it has
		focus
	*/
	function removeText() {		
		if ( $("#textAreaId").text() == promptStr ) {
			$("#textAreaId").text('');
		}
	}
	
	function addItem() {
		
	}
	
	/**
		Resets the prompt with the initial text
	*/
	function resetPrompt() {
		$("#textAreaId").text(promptStr);
	}
	
	/**
		Adds a SkrumItem to the list
	*/
	function submitSkrumItem(tabId) {
		var params = encodeURI( $("#textAreaId").val() ) + "&tabId=" + tabId;
		
		$.ajax({
			url: urlStr + "AddSkrumItemWebAction&text=" + params  
			,dataType: "html"
			,type: "GET"
			
			,cache: false
			,context: document.body
			,success: function(data, textStatus, jqXHR) {
				$("#sortable").prepend(data);
				resetPrompt();						
			}
			,error: function(jqXHR, textStatus, errorThrown) {
				alert('failure');
			}
		});
	}
	
	/**
		Mark an Item as completed
	*/
	function submitSkrumItemCompleted(tabId, itemId) {				
		$.ajax({
			url: urlStr + "RemoveSkrumItemWebAction&tabId=" + tabId + "&itemId=" + itemId 
			,dataType: "html"
			,type: "GET"
			
			,cache: false
			,context: document.body
			,success: function(data, textStatus, jqXHR) {
				//$('.skrumItem' + itemId).remove();
				$('#' + itemId).remove();
				resetPrompt();						
			}
			,error: function(jqXHR, textStatus, errorThrown) {
				alert('failure');
			}
		});
	}
	
</script>	

<!-- 
	TODO - Incorporate tabs
 -->
<c:forEach items="${skrumListingBean.skrumList.scrumTabs}"
		   var="skrumTabs" >

	<div class="embeddedSkrumList">				
		<div id="skrumItemPrompt">
			<table>
				<tbody>						
					<tr>
						<td>
						<textarea rows="3" cols="60" onclick="removeText();" id="textAreaId"></textarea>
						<td>
						<td><img src="./images/move_icon.jpg" /></td>
						<td><button onclick="submitSkrumItem(${skrumTabs.order});">Submit</button></td>
					</tr>										
				</tbody>
			</table>
		</div>
					
		<ul id="sortable">						
			<c:forEach items="${skrumTabs.activeList.items}"
					   var="skrumItem" >
				<li id="${skrumItem.order}">
					<div id="skrumItem${skrumItem.order}" class="skrumItem${skrumItem.order}" >
						<table>
							<tbody>						
								<tr>
									<td>
									<textarea rows="5" cols="60" onclick="removeText();" id="textAreaId" readonly="readonly">${skrumItem.text}</textarea>
									<td>
									<td><img src="./images/move_icon.jpg" /></td>
									<td><button onclick="submitSkrumItemCompleted(${skrumListingBean.currentTabId},${skrumItem.order})">Done</button></td>
								</tr>										
								<tr><td id="creationTimeId">${skrumItem.creationTime}</td></tr>
							</tbody>
						</table>
					</div>
				</li>					   
			</c:forEach>			
		</ul>
		
	</div>					
</c:forEach>		